<template>
  <div class="movie-home">
    
    <div class="movie-category">
      <el-row type="flex" class="row-bg">
        <el-col :span="12">
          <div class="grid-content bg-purple">影院热映</div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">欧美新碟榜</div>
        </el-col>
      </el-row>
      <el-row type="flex" class="row-bg">
        <el-col :span="12">
          <div class="grid-content bg-purple">注册账号</div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">登录豆瓣</div>
        </el-col>
      </el-row>
    </div>
    <!-- 活动信息-展览 -->
    <div class="list" v-if="videoList">
      <div class="list-item" v-for="(item, index) in this.$store.state.videodetailinfos" :key='index' @click='goMovieInfo(item.id)'>
        <div class="item-main">
          <div class="item-left">
            <h3 class="item-tile">{{ item.title }}</h3>
            <p class="item-info" v-html='item.content.substr(0,30)'>
              <!-- <span>展期: 2017/3/2</span>
              <span>地点: 北京</span> -->
              <!-- 展览“奇妙的不确定性”旨在强调当代艺术中某些特定叙事的重要性 -->
            </p>
          </div>
          <div class="item-right">
            <img :src="item.image_lmobile" alt="">
          </div>
        </div>
        <p class="sub">
          <span class="category_name">{{ item.category_name }}</span>
          <span class="tags">{{ item.tags }}</span>
        </p>
      </div>
      <mt-button @click='getMore' type='danger' size="large" plain v-show="!loading">加载更多</mt-button>
    <br>
    </div>
    <div class="list-son" v-if='!videoList'>
      hhh
    </div>
<mt-spinner v-show="loading" :type="3" :size="60"></mt-spinner>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      // list: this.$store.state.videodetailinfos,
      // flag:false,
      videoList:true,
      
    };
  },
  methods: {
    getActivityInfo() {
      // this.flag = false;
      this.loading = true
      var infosList = JSON.parse(sessionStorage.getItem('videodetailinfos') || '[]');
      $jsonp(
        "https://api.douban.com/v2/event/list?loc=108288",
        { start:this.$store.state.jsonpNmae.start, count: this.$store.state.jsonpNmae.count },
        res => {
          infosList = infosList.concat(res.events);
          // this.list = this.list.concat(res.events);
          this.$store.state.jsonpNmae.start = this.$store.state.jsonpNmae.count = this.$store.state.jsonpNmae.count + 1;
          this.$store.state.jsonpNmae.count += 5;
           this.$store.state.flag = true;
          this.loading = false
          sessionStorage.setItem('videodetailinfos', JSON.stringify(infosList));
          this.$store.commit('setVideodetailinfos');
        }
      );
    },
    getMore(){
     
        this.getActivityInfo();
      //  this.$store.state.flag = false;
    },
    goMovieInfo(id){
      
      this.videoList = !this.videoList;
      // this.$router.push({ path: `/home/video/actinfo/${id}` })
      this.$router.push({ name:'videoinfo', params:{id} })
      this.$store.state.flag   = false
      // this.$router.push()
    }
  },
  created() {
  if(this.$store.state.flag){
    this.getActivityInfo()
  }
  },
  mounted(){
    
  }
};
</script>

<style lang="less">
@import url("./movie-home.less");
</style>
